<template>
    <div>
        <h1>合班管理</h1>
        <el-button type="text" @click="addClassMerge">新增合班</el-button>
<!--    添加    -->
        <el-dialog title="新增班级" :visible.sync="dialogFormVisible">
            <el-form :model="form" ref="form" label-width="100px">
                <el-form-item label="新班级">
                    <el-col :span="5">
                        <el-select v-model="form.newClassId" @change="handNewChange" placeholder="请选择班级名">
                            <el-option v-for="item in newclassList"
                                       :label="item.classesName"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="被合并班级">
                    <el-col :span="5">
                        <el-select v-model="form.mergeClassId" @change="handMergeChange" placeholder="请选择班级名">
                            <el-option v-for="item in oldclassList"
                                       :label="item.classesName"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addClassmerge">确 定</el-button><!--dialogFormVisible = false-->
            </div>
        </el-dialog>
<!--    列表     -->
        <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column prop="id" label="ID" width="50" ></el-table-column>
            <el-table-column prop="newClass.classesName" label="新班级" width="200"></el-table-column>
            <el-table-column prop="mergeClass.classesName" label="被合并班级" width="300"></el-table-column>
            <el-table-column prop="mergeTime" label="合班时间" width="300"></el-table-column>
            <el-table-column prop="teacher.name" label="添加人" width="150"></el-table-column>
            <el-table-column align="center" label="操作" width="300" :resizable="false">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" icon="el-icon-delete"
                               @click="handleDelete(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                layout="prev, pager, next"
                :current-page="pageNum"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
                :hide-on-single-page="true"
                @current-change="handleInitClassMerge"
        >
        </el-pagination>

    </div>
</template>

<script>
    export default {
        name: "ManageClassmergeView",
        data(){
            return{
                classMerge:{},
                pageNum:1,
                pageInfo:[],
                tableData: [],
                type: [],
                dialogTableVisible: false,
                dialogFormVisible: false,
                form:{
                    newClassId:'',
                    mergeClassId:'',
                    mergeTime:'',
                    inputId:'',
                    enable:''
                },
                formLabelWidth: '100px',

                //班级列表
                classesList:[],
                newclassList:[],
                oldclassList:[],
            }
        },
        created() {
            this.handleInitClassMerge();
            // this.getClasses();
        },

        methods: {
            handMergeChange(){
                let id = this.form.mergeClassId;
                this.newclassList = this.classesList.filter(item =>{
                    return item.id == id?false:true;
                })
            },
            handNewChange(){
                let id = this.form.newClassId;
                this.oldclassList = this.classesList.filter(item =>{
                    return item.id == id?false:true;
                })

            },
            handleInitClassMerge(pageNum) {
                if(typeof pageNum == "number"){
                    this.pageNum = pageNum;
                }
                else{
                    this.pageNum=1;
                }
                // console.log(this.classes.classesTypeId);
                this.$axios.post("http://localhost:8080/manage/classMerge/list",this.classMerge,{params:{pageNum:this.pageNum}}).then(response => {
                    this.pageInfo = response.data.data;
                    const data = response.data.data.list
                    // console.log(data)
                    // for (var i in data) {
                    //     data[i]['inputTime'] = data[i]['inputTime'].replace("T", " ");
                    // }
                    this.tableData = data;
                });
            },
            addClassMerge() {
                this.dialogFormVisible = true;

                this.$axios.get("/manage/classMerge/classesList").then(response => {
                    this.classesList = response.data.classesList;
                    this.newclassList = response.data.classesList;
                    this.oldclassList = response.data.classesList;
                });

            },
            // getClasses() {
            //     this.$axios.get("http://localhost:8080/manage/classes/list").then(response => {
            //         this.type = response.data.data;
            //     });
            // },
            addClassmerge(){
                this.dialogFormVisible = false;
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.$axios.post("http://localhost:8080/manage/classMerge/save", this.form).then(response => {
                            if (response.data.code == 10001) {
                                this.$message({
                                    showClose: true,
                                    message: '该班级已存在',
                                    type: 'error'
                                });
                            } else if (response.data.code == 200) {
                                this.handleInitClassMerge();
                                this.dialogFormVisible = false;
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            handleDelete(id) {
                this.$confirm('此操作将永久删除该班级, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.get("http://localhost:8080/manage/classMerge/delete",{params:{id: id}}).then(response => {
                        if(response.data.code == 200){
                            this.handleInitClassMerge();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                        else{
                            this.$message({
                                showClose: true,
                                message: '删除出错啦',
                                type: 'error'
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        }
    }
</script>

<style scoped>

</style>